<template>
  <div class="radar">
    <h3>雷达</h3>
    <button @click="scan">扫描</button>
    <div v-if="scannedTowers.length > 0">
      <h4>探测到的防御塔</h4>
      <ul>
        <li v-for="tower in scannedTowers" :key="tower.id">
          <button @click="attack(tower)">{{ tower.name }}</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scannedTowers: []
    };
  },
  methods: {
    scan() {
      this.scannedTowers = [
        { id: 1, name: 'Tower 1' },
        { id: 2, name: 'Tower 2' },
        // 可以根据需要添加更多的防御塔对象
      ];
      console.log("正在扫描目标...");
    },
    attack(tower) {
      console.log("发起攻击！目标：", tower.name);
      // 在这里可以实现攻击逻辑
    }
  }
};
</script>

<style scoped>
.radar {
  position: relative;
  width: 100%;
  height: 100vh;
}

.radar h3 {
  margin-top: 0;
}

.radar button {
  display: block;
  margin: 10px auto;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #4CAF50;
  color: #fff;
  cursor: pointer;
}

.radar button:hover {
  background-color: #45a049;
}
</style>
